<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
        <Form-item label="会员名称" prop="memberName">
          <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="店铺名称" prop="storeName">
          <Input type="text" v-model="searchForm.storeName" placeholder="请输入店铺名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="店铺状态">
          <Select v-model="searchForm.storeDisable" clearable style="width: 200px">
            <Option value="OPEN">开启中</Option>
            <Option value="CLOSED">已关闭</Option>
            <Option value="APPLY">申请中</Option>
            <Option value="APPLYING">审核中</Option>
            <Option value="REFUSED">审核拒绝</Option>
          </Select>
        </Form-item>
        <Form-item label="创建时间" prop="createTime">
          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker>
        </Form-item>
        <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      </Form>
      <Row class="operation padding-row">
        <!-- <Button @click="add" type="primary">添加</Button> -->
      </Row>
      <Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
      </Row>
    </Card>
    <!-- 关闭 -->
    <Modal v-model="detailFlag" title="确认关闭" @on-ok="handleSubmit" @on-cancel="handleCancel">
      <div>
        <Form ref="formClose" :model="formClose" :label-width="100">
          <div class="close-title">您确认要关闭店铺 {{ closeObj.storeName }}？</div>
          <FormItem label="关闭原因" prop="categoryId">
            <Select v-model="formClose.auditStatus" style="width: 200px">
              <Option value="1">店铺违规</Option>
              <Option value="2">商家未缴年费</Option>
              <Option value="3">商品图片、文字违规</Option>
              <Option value="4">店铺注销</Option>
              <Option value="5">其他原因</Option>
            </Select>
          </FormItem>
          <FormItem label="备注" prop="categoryId">
            <Input v-model="formClose.remark" style="width: 200px" />
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 设置模态框 -->
    <Modal v-model="descFlag" :title="descTitle" width="500">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
        <FormItem label="店铺名称" prop="storeName">
          <Input v-model="form.storeName" style="width: 200px" readonly />
        </FormItem>
        <FormItem label="年费金额" prop="payMoney">
          <!-- <Input v-model="form.gradeInterest" style="width: 200px" /> -->
          <Input-number :max="999999999" :min="1" v-model="form.payMoney" style="width: 200px"></Input-number>
        </FormItem>
        <FormItem label="开始时间" prop="memberCreateTime">
          <Date-picker type="date" :value="form.memberCreateTime" placeholder="选择开始时间" @on-change="memberstartTimecli" style="width: 200px"></Date-picker>
          <!-- <Input v-model="form.memberCreateTime" style="width: 200px" readonly /> -->
        </FormItem>
        <FormItem label="结束时间" prop="memberEndTime">
          <Date-picker type="date" :value="form.memberEndTime" placeholder="选择结束时间" @on-change="memberEndTimecli" style="width: 200px" readonly></Date-picker>
          <!-- <Input v-model="form.memberEndTime" style="width: 200px" /> -->
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="descFlag = false">取消</Button>
        <Button type="primary" @click="handleSubmitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getShopListData,
  disableShop,
  enableBrand,
  shopAudit,
  shopDetail,
  shopEditHy,
} from "@/api/shops"
export default {
  name: "shop",
  data () {
    return {
      descFlag: false,
      detailFlag: false, //关闭弹窗
      descTitle: "", // modal标题
      loading: true, // 表单加载状态
      searchForm: {
        groupBySort: true,
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        startDate: "", // 起始时间
        endDate: "", // 终止时间
      },
      selectDate: null, // 创建时间
      columns: [
        // 表头
        {
          title: "店铺名称",
          key: "storeName",
          align: "left",
        },
        {
          title: "会员名称",
          key: "memberName",
          tooltip: true,
        },
        {
          title: "店铺地址",
          key: "storeAddressPath",
          width: 300,
          tooltip: true,
          render: (h, params) => {
            return h("Tag", {}, params.row.storeAddressPath || "暂未填写")
          },
        },
        {
          title: "年费金额",
          key: "payMoney",
          tooltip: true,
        },
        {
          title: "开始时间",
          key: "memberCreateTime",
          tooltip: true,
        },
        {
          title: "到期时间",
          key: "memberEndTime",
          tooltip: true,
        },
        {
          title: "店铺状态",
          key: "storeDisable",
          align: "left",
          width: 130,
          render: (h, params) => {
            if (params.row.storeDisable == "OPEN") {
              return h("Tag", {
                props: {
                  color: "green"
                }
              }, "开启中")
            } else if (params.row.storeDisable == "CLOSED") {
              return h("Tag", {
                props: {
                  color: "volcano"
                }
              }, "已关闭")
            } else if (params.row.storeDisable == "APPLY") {
              return h("Tag", {
                props: {
                  color: "geekblue"
                }
              }, "申请中")
            } else if (params.row.storeDisable == "APPLYING") {
              return h("Tag", {
                props: {
                  color: "purple"
                }
              }, "审核中")
            } else if (params.row.storeDisable == "REFUSED") {
              return h("Tag", {
                props: {
                  color: "red"
                }
              }, "审核拒绝")
            }
          },
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = ""
            if (params.row.storeDisable == "OPEN") {
              enableOrDisable = h(
                "Button", {
                props: {
                  size: "small",
                  type: "error",
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.disable(params.row)
                  },
                },
              },
                "关闭"
              )
            } else if (params.row.storeDisable == "CLOSED") {
              enableOrDisable = h(
                "Button", {
                props: {
                  type: "success",
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.enable(params.row)
                  },
                },
              },
                "开启"
              )
            }
            // else if (params.row.storeDisable == "APPLYING") {
            //   return h("div", [
            //     h(
            //       "Button",
            //       {
            //         props: {
            //           type: "info",
            //           size: "small",
            //         },
            //         style: {
            //           marginRight: "5px",
            //         },
            //         on: {
            //           click: () => {
            //             this.audit(params.row);
            //           },
            //         },
            //       },
            //       "审核"
            //     ),
            //     h(
            //       "Button",
            //       {
            //         props: {
            //           type: "primary",
            //           size: "small",
            //         },
            //         style: {
            //           marginRight: "5px",
            //         },
            //         on: {
            //           click: () => {
            //             this.edit(params.row);
            //           },
            //         },
            //       },
            //       "修改"
            //     ),
            //   ]);
            // }

            return h("div", [
              h(
                "Button", {
                props: {
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                  display: this.selectedShop ? "inline-block" : "none",
                },
                on: {
                  click: () => {
                    this.callback(params.row)
                  },
                },
              },
                "选择"
              ),
              // h(
              //   "Button",
              //   {
              //     props: {
              //       type: "info",
              //       size: "small",
              //     },
              //     style: {
              //       marginRight: "5px",
              //     },
              //     on: {
              //       click: () => {
              //         this.detail(params.row);
              //       },
              //     },
              //   },
              //   "查看"
              // ),
              h(
                "Button", {
                props: {
                  type: "info",
                  size: "small",
                  ghost: true,
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.editPerm(params.row)
                  },
                },
              },
                "设置"
              ),
              enableOrDisable,
            ])
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      selectedShop: false, //用于是否选择店铺
      //设置表单
      form: {
        storeName: "",
        payMoney: 1,
        memberCreateTime: "",
        memberEndTime: "",
      },
      //关闭表单
      formClose: {
        auditStatus: "1",
        remark: "",
      },
      closeObj: "", //要关闭的店铺对象
      ruleValidate: {
        storeName: [{
          required: true,
          message: "请输入店铺名称"
        }],
        payMoney: [{
          required: true,
          message: "请输入年费金额"
        }],
        memberCreateTime: [{
          required: true,
          message: "请输入开始时间"
        }],
        memberEndTime: [{
          required: true,
          message: "请选择结束时间",
          trigger: "change"
        },],
      }, //修改验证
      editid: "", //设置修改id
    }
  },

  methods: {
    // 回调给父级
    callback (val) {
      this.$emit("callback", val)
    },
    // 初始化数据
    init () {
      this.getDataList()
    },
    // 分页 改变页码
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getDataList()
    },
    // 分页 改变页数
    changePageSize (v) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = v
      this.getDataList()
    },
    // 搜索
    handleSearch () {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getDataList()
    },
    // 起止时间分别赋值
    selectDateRange (v) {
      if (v) {
        this.searchForm.startDate = v[0]
        this.searchForm.endDate = v[1]
      }
    },
    // 获取列表数据
    getDataList () {
      this.loading = true
      // 带多条件搜索参数获取表单数据 请自行修改接口
      getShopListData(this.searchForm).then((res) => {
        this.loading = false
        if (res.success) {
          this.data = res.result.records
          this.total = res.result.total
        }
      })
      this.total = this.data.length
      this.loading = false
    },
    // 添加店铺
    add () {
      this.$router.push({
        path: "/shop-operation"
      })
    },
    // 修改店铺
    edit (v) {
      this.$router.push({
        path: "/shop-operation",
        query: {
          shopId: v.id
        }
      })
    },
    // 关闭店铺
    disable (v) {
      this.detailFlag = true
      this.closeObj = v

      // this.$Modal.confirm({
      //   title: "确认关闭",
      //   content: "您确认要关闭店铺 " + v.storeName + " ?",
      //   loading: true,
      //   onOk: () => {},
      // });
    },
    handleSubmit () {
      disableShop({
        id: this.closeObj.id,
        ...this.formClose
      }).then((res) => {
        if (res.success) {
          this.$Message.success("操作成功")
          this.getDataList()
        }
      })
    },
    handleCancel () {
      this.detailFlag = false
      this.closeObj = {}
      this.formClose.auditStatus = "1"
    },
    //查看店铺详细
    detail (row) {
      this.$router.push({
        name: "shop-detail",
        query: {
          id: row.id
        }
      })
    },
    // 审核店铺
    audit (v) {
      this.$Modal.confirm({
        title: "审核店铺",
        content: "您确认要审核通过店铺 " + v.storeName + " ?",
        okText: "通过",
        cancelText: "驳回",
        loading: true,
        onOk: () => {
          shopAudit(v.id, 0).then((res) => {
            this.$Modal.remove()
            if (res.success) {
              this.$Message.success("操作成功")
              this.getDataList()
            }
          })
        },
        onCancel: () => {
          shopAudit(v.id, 1).then((res) => {
            this.$Modal.remove()
            if (res.success) {
              this.$Message.success("操作成功")
              this.getDataList()
            }
          })
        },
      })
    },
    // 启用店铺
    enable (v) {
      this.$Modal.confirm({
        title: "确认开启",
        content: "您确认要开启店铺 " + v.storeName + " ?",
        loading: true,
        onOk: () => {
          enableBrand(v.id).then((res) => {
            this.$Modal.remove()
            if (res.success) {
              this.$Message.success("操作成功")
              this.getDataList()
            }
          })
        },
      })
    },
    //查看详情修改
    editPerm (val) {
      this.descTitle = `设置 ${val.storeName}`
      this.descFlag = true
      this.getMemberInfo(val.id)
      this.editid = val.id
    },
    // 查询查看等级详情
    getMemberInfo (id) {
      shopDetail(id).then((res) => {
        if (res.result) {
          this.$set(this, "form", res.result)
        }
      })
    },
    memberstartTimecli (time) {
      this.form.memberCreateTime = time
      var d2 = new Date(time)
      d2.setFullYear(d2.getFullYear() + 1)
      d2.setDate(d2.getDate() - 1)
      let newtime = d2.toLocaleString()
      let year = newtime.substr(0, 4)
      let months = ''
      let days = ''
      if (newtime.length >= 18) {
        let month = newtime.substr(5, 2)
        let day = newtime.substr(8, 2)
        months = month
        days = day
      } else {
        let month = newtime.substr(5, 1)
        let day = newtime.substr(7, 2)
        months = month
        days = day
      }
      this.form.memberEndTime = year + '-' + months + '-' + days
    },
    //修改结束时间
    memberEndTimecli (v) {
      this.form.memberEndTime = v
    },
    // 提交修改数据
    handleSubmitModal () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let params = {
            payMoney: this.form.payMoney,
            memberCreateTime: this.form.memberCreateTime,
            memberEndTime: this.form.memberEndTime,
            id: this.editid,
          }
          shopEditHy(params).then((res) => {
            if (res.code == 200) {
              this.descFlag = false
              this.$Message.success("修改成功！")
              this.getDataList()
            }
          })
        } else {
          this.$Message.error("必填项不能为空!")
          return false
        }
      })
    },
  },
  mounted () {
    this.init()
  },
};
</script>
<style scoped>
.close-title {
  margin: 0 0 30px 40px;
  font-weight: 800;
  font-size: 16px;
}
</style>
